<template>
	<view>
		<!-- 修改密码 -->
		<view class="forgetStep">
			<view class="forgetIcon" v-for="item in stepArr">
				<view class="forgetId">{{item.id}}</view>
				<image src="../../static/img/right 2.svg"></image>
				<text class="forgetTitle">{{item.title}}</text>
			</view>
		</view>

		<view class="forgetCon">
			<view class="phone">
				<image src="../../static/img/phone.png"></image>
				<input class="phoneInput" v-model="oldPwd" maxlength="16"  placeholder="输入旧密码" @blur="oldPwdError"/>
				<text class="pwdErr">{{oldPwdMsg}}</text>
			</view>
			<view class="phone">
				<image src="../../static/img/phone.png"></image>
				<input class="phoneInput" v-model="newPwd" maxlength="16"  placeholder="输入新密码" @blur="newPwdError"/>
				<text class="pwdErr">{{newPwdMsg}}</text>
			</view>
			<view class="phone">
				<image src="../../static/img/phone.png"></image>
				<input class="phoneInput" v-model="pwd" maxlength="16"  placeholder="确认密码" @blur="pwdError"/>
				<text class="pwdErr">{{pwdMsg}}</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				stepArr: [{
						id: 1,
						title: "输入旧密码"
					},
					{
						id: 2,
						title: "输入新密码"
					},
					{
						id: 3,
						title: "确认密码"
					}
				],
				oldPwd:'',
				newPwd:'',
				newPwdMsg:'',
				oldPwdMsg:'',
				pwd:'',
				pwdMsg:'',
			}
		},
		methods: {
		// 旧密码校验
		oldPwdError() {
			if (this.oldPwd.length == 0 || this.oldPwd == "") {
				this.oldPwdMsg = "请输入您的旧密码！"
			} else if (!/^(?=.*[0-9])(?=.*[a-zA-Z])[0-9A-Za-z~!@#$%^&*._?]{8,16}$/.test(this.oldPwd)) {
				this.oldPwdMsg = "密码必须包括数字、字母两种字符，特殊字符可有可无，长度在8-16位之间！"
			} else {
				this.oldPwdMsg = ""
			}
		},
		// 新密码校验
		newPwdError() {
			if (this.newPwd.length == 0 || this.newPwd == "") {
				this.newPwdMsg = "请输入您的新密码！"
			} else if (!/^(?=.*[0-9])(?=.*[a-zA-Z])[0-9A-Za-z~!@#$%^&*._?]{8,16}$/.test(this.newPwd)) {
				this.newPwdMsg = "密码必须包括数字、字母两种字符，特殊字符可有可无，长度在8-16位之间"
			} else {
				this.newPwdMsg = ""
			}
		},
		// 新密码校验
		pwdError(){
			if (this.pwd.length == 0 || this.pwd == "") {
					this.pwdMsg = "请输入您的新密码！"
				} else if (!/^(?=.*[0-9])(?=.*[a-zA-Z])[0-9A-Za-z~!@#$%^&*._?]{8,16}$/.test(this.pwd)) {
					this.pwdMsg = "密码必须包括数字、字母两种字符，特殊字符可有可无，长度在8-16位之间"
				} else {
					this.pwdMsg = ""
				}
			},
		}
	}
</script>

<style lang="scss">
	.forgetStep {
		width: 100%;
		margin-left: 41px;
		margin-top: 36px;

		view:nth-last-child(1) {
			image {
				visibility: hidden;
			}
		}

		.forgetIcon {
			position: relative;
			float: left;
			text-align: center;

			.forgetId {
				text-align: center;
				width: 52px;
				height: 52px;
				line-height: 40px;
				border-radius: 52px;
				border: 6px solid rgba(117, 23, 238, 0.79);
				box-sizing: border-box;
				margin-right: 47px;
			}

			image {
				position: absolute;
				left: 60px;
				top: 12px;
				width: 30px;
				height: 30px;
			}

			.forgetTitle {
				position: absolute;
				left: -6px;
				top: 68px;
				font-size: 14px;
				line-height: 20px;
				white-space: nowrap;

			}
		}
	}

	.forgetStep:after {
		content: "";
		display: block;
		height: 0;
		clear: both;
		visibility: hidden;
	}

	.forgetCon {
		margin-top: 58px;

		.phone {
			margin-left: 58px;
			width: 258px;
			height: 57px;
			border-radius: 21px;
			text-align: center;
			border: 1px solid rgba(187, 187, 187, 1);
			box-sizing: border-box;
			margin-bottom: 40px;

			image {
				float: left;
				margin-left: 18px;
				margin-top: 14px;
				width: 30px;
				height: 30px;
			}

			.phoneInput {
				height: 57px;
				line-height: 57px;
				text-align: left;
				padding-left: 19px;
				font-size: 14px;
			}
		}
		}
</style>
